/** @jsxImportSource @emotion/react */
import * as React from "react";
import {InputLine, BlobInputList,} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useInputControlSure,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import {EditStorageContext} from "../StorageContext";
import {useUppyUpload} from "../hook/useUppyUpload";


interface AppendixDiagramProps  extends InternalItemProps{
    /**最多文件个数， 一次性允许几个文件的上传*/
    maxFile: number;
    title?: string;
}
const 附图说明选: string[] | undefined=[ ];
export const itemA附图=['附图说明','_FILE_S附页'];

/**配合 报告的ViewAppendixPic；做上传 可能多个图片。
 * 图片 是多个一次性上传的。打印分成多页独立显示的。
 * */
export const AppendixDiagram=
React.forwardRef(({ children, show ,alone=true,repId,redId,nestMd,refWidth,rep,
                      maxFile,title='附页的图片上传'}:AppendixDiagramProps,  ref
) => {
    const {modified,setModified,} =React.useContext(EditStorageContext) as any;
    const [getInpFilter] = useMeasureInpFilter(null, itemA附图, );
    const {inp, setInp,onSure} = useInputControlSure({ ref,redId,nestMd });
    const onFinish = React.useCallback(async(upfile: any, del:boolean) => {
        onSure({...inp, '_FILE_S附页': upfile});
        !modified && setModified(true);
    }, [inp, modified,onSure,setModified]);
    const [uploadDom]=useUppyUpload({ repId:repId!,
        maxFile:maxFile, onFinish, storeObj: inp?._FILE_S附页
    });

    return (
        <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show} redId={redId} nestMd={nestMd}
                             alone={alone}  label={title}>
            <InputLine label='附页附图的说明：'>
                <BlobInputList value={inp?.附图说明 || ''} rows={5} datalist={附图说明选}
                               onListChange={v => setInp({...inp, 附图说明: v || undefined}) } />
            </InputLine>
            附页附图(可多个)：
            {uploadDom}
            {children}
        </InspectRecordLayout>
    );
} );

